<template>
  <div class="bigbox">
    <!-- 盒子头部 -->
    <div class="titlebox">
      <!-- <div>{{ userinfo.orgName }}能源科技有限公司</div> -->
      <div class="div">
        <template>
          <el-select
            v-model="form.bizOrgName"
            ref="shou"
            class="select"
            :popper-append-to-body="false"
          >
            <el-option
              class="option"
              :lable="form.bizOrgName"
              value="value"
              suffix-icon="el-icon-date"
            >
              <el-tree
                :props="props"
                node-key="id"
                :default-expanded-keys="[defaultExpandedKey]"
                :highlight-current="true"
                :load="loadNode"
                lazy
                @node-click="handleNodeClick"
                ref="tree"
              >
              </el-tree>
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="zhong div" style="text-align: center">{{ zidianname }}</div>
      <div class="div" style="text-align: right">
        <span></span>{{ timeobj.year }}年{{ timeobj.month }}月{{
          timeobj.date
        }}日 {{ timeobj.week }}
      </div>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <!-- 左侧盒子 -->
      <div class="leftbox">
        <div class="little">
          <div class="img"><img src="../../assets/anquan.png" alt="" /></div>
          <div class="text">
            <span class="number">{{ jibenqingkuang.userRunDays }}</span>
            <p class="day">安全运行（天）</p>
          </div>
        </div>
        <div class="little">
          <div class="img"><img src="../../assets/zhanfang.png" alt="" /></div>
          <div class="text">
            <span class="green">{{ jibenqingkuang.switchroomSize }}</span>
            <p class="day">站房（个）</p>
          </div>
        </div>
        <div class="little">
          <div class="img"><img src="../../assets/bianya.png" alt="" /></div>
          <div class="text">
            <span class="green">{{ jibenqingkuang.transformerSize }}</span>
            <p class="day">变压器（台）</p>
          </div>
        </div>
        <div class="little">
          <div class="img"><img src="../../assets/ronfliang.png" alt="" /></div>
          <div class="text">
            <span class="yellow">{{ jibenqingkuang.userCapacity }}</span>
            <p class="day">容量（kW）</p>
          </div>
        </div>
        <div class="little">
          <div class="img"><img src="../../assets/jiance.png" alt="" /></div>
          <div class="text">
            <span class="green">{{ guangfufadian }}</span>
            <p class="day">总发电量（kWh）</p>
          </div>
        </div>
        <div class="footer">
          <div class="zianxian">
            <span class="span"></span><span>在线</span>
            <p>
              <span
                >{{ zhongduanobjy.termOnline + zhongduanobjy.meterOnline }}
              </span>
              个
            </p>
          </div>
          <div class="bingtu" ref="progress">
            <!-- <el-progress type="circle" :percentage="(zhongduanobjy.termOnlineRate*100)" :stroke-width="10"
              v-if="!isNaN(zhongduanobjy.termOnlineRate*100)"

              define-back-color="#4c617c" color="#14ccad" stroke-linecap="square"
              text-color="#fff" :show-text="true"
              ></el-progress>
              <div class="text">
                <span>{{ zhongduanobjy.termOnlineRate*100 }}%</span>
                <p>在线率</p>
              </div> -->
          </div>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="moblebox">
        <div class="header">
          <!-- 电量 -->
          <div class="littlebox">
            <div class="title">电量</div>
            <div class="tanpai">
              <div class="tanone">
                <div class="little">
                  <p>今日（万kWh）</p>
                  <span class="green">{{
                    (yongdianobj.epowerCurDay / 10000).toFixed(2)
                  }}</span>
                </div>
                <div class="little">
                  <p>昨日（万kWh）</p>
                  <span class="yellow">{{
                    (yongdianobj.epowerPreDay / 10000).toFixed(2)
                  }}</span>
                </div>
              </div>
              <div class="tanone">
                <div class="little">
                  <p>本月电量（万kWh）</p>
                  <span class="green">{{
                    (yongdianobj.epowerCurMonth / 10000).toFixed(2)
                  }}</span>
                </div>
                <div class="little">
                  <p>上月同期（万kWh）</p>
                  <span class="yellow">{{
                    (yongdianobj.epowerPreMonth / 10000).toFixed(2)
                  }}</span>
                </div>
              </div>
              <div class="tanone">
                <div class="little">
                  <p>本年累计（万kWh）</p>
                  <span class="green">{{
                    (yongdianobj.epowerCurYear / 10000).toFixed(2)
                  }}</span>
                </div>
                <div class="little">
                  <p>去年同期（万kWh）</p>
                  <span class="yellow">{{
                    (yongdianobj.epowerPreYear / 10000).toFixed(2)
                  }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 负荷 -->
          <div class="littlebox">
            <div class="title">负荷</div>
            <div class="model">
              <div class="img">
                <div></div>
                <div>最高负荷</div>
                <div>平均负荷</div>
              </div>
              <div class="imgtwo">
                <div class="topp">
                  <div class="c">
                    <span class="span"></span><span>今日(kW)</span>
                  </div>
                  <div class="c green">
                    {{
                      yongdianfuheobj.loadCurDayMax
                        ? (+yongdianfuheobj.loadCurDayMax).toFixed(1)
                        : ""
                    }}
                  </div>
                  <div class="c green">
                    {{
                      yongdianfuheobj.loadCurDayAvg
                        ? (+yongdianfuheobj.loadCurDayAvg).toFixed(1)
                        : ""
                    }}
                  </div>
                </div>
                <div class="topp">
                  <div class="b">
                    <span class="spanss"></span><span>昨日(kW)</span>
                  </div>
                  <div class="b yellow">
                    {{
                      yongdianfuheobj.loadPreDayMax
                        ? (+yongdianfuheobj.loadPreDayMax).toFixed(1)
                        : ""
                    }}
                  </div>
                  <div class="b yellow">
                    {{
                      yongdianfuheobj.loadPreDayAvg
                        ? (+yongdianfuheobj.loadPreDayAvg).toFixed(1)
                        : ""
                    }}
                  </div>
                </div>
              </div>
              <div class="imgtwo">
                <div class="topp">
                  <div class="c">
                    <span class="span"></span><span>本月(kW)</span>
                  </div>
                  <div class="c green">
                    {{
                      yongdianfuheobj.loadCurMonthMax
                        ? (+yongdianfuheobj.loadCurMonthMax).toFixed(1)
                        : ""
                    }}
                  </div>
                  <div class="c green">
                    {{
                      yongdianfuheobj.loadCurMonthAvg
                        ? (+yongdianfuheobj.loadCurMonthAvg).toFixed(1)
                        : ""
                    }}
                  </div>
                </div>
                <div class="topp">
                  <div class="b">
                    <span class="spanss"></span><span>上月(kW)</span>
                  </div>
                  <div class="b yellow">
                    {{
                      yongdianfuheobj.loadPreMonthMax
                        ? (+yongdianfuheobj.loadPreMonthMax).toFixed(1)
                        : ""
                    }}
                  </div>
                  <div class="b yellow">
                    {{
                      yongdianfuheobj.loadPreMonthAvg
                        ? (+yongdianfuheobj.loadPreMonthAvg).toFixed(1)
                        : ""
                    }}
                  </div>
                </div>
              </div>
              <div class="imgtwo">
                <div class="topp">
                  <div class="c">
                    <span class="span"></span><span>本年(kW)</span>
                  </div>
                  <div class="c green">
                    {{
                      yongdianfuheobj.loadCurYearMax
                        ? (+yongdianfuheobj.loadCurYearMax).toFixed(1)
                        : ""
                    }}
                  </div>
                  <div class="c green">
                    {{
                      yongdianfuheobj.loadCurYearAvg
                        ? (+yongdianfuheobj.loadCurYearAvg).toFixed(1)
                        : ""
                    }}
                  </div>
                </div>
                <div class="topp">
                  <div class="b">
                    <span class="spanss"></span><span>去年(kW)</span>
                  </div>
                  <div class="b yellow">
                    {{
                      yongdianfuheobj.loadPreYearMax
                        ? (+yongdianfuheobj.loadPreYearMax).toFixed(1)
                        : ""
                    }}
                  </div>
                  <div class="b yellow">
                    {{
                      yongdianfuheobj.loadPreYearAvg
                        ? (+yongdianfuheobj.loadPreYearAvg).toFixed(1)
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 碳排放 -->
          <div class="littlebox">
            <div class="title">碳排</div>
            <div class="tanpai">
              <div class="tanone">
                <div class="little">
                  <p>今日(吨)</p>
                  <span class="green">
                    {{
                      yongdianobj.carbonEmissionCurDay
                        ? (+yongdianobj.carbonEmissionCurDay).toFixed(1)
                        : ""
                    }}</span
                  >
                </div>
                <div class="little">
                  <p>昨日(吨)</p>
                  <span class="yellow">{{
                    yongdianobj.carbonEmissionPreDay
                      ? (+yongdianobj.carbonEmissionPreDay).toFixed(1)
                      : ""
                  }}</span>
                </div>
              </div>
              <div class="tanone">
                <div class="little">
                  <p>本月碳排(吨)</p>
                  <span class="green">{{
                    yongdianobj.carbonEmissionCurMonth
                      ? (+yongdianobj.carbonEmissionCurMonth).toFixed(1)
                      : ""
                  }}</span>
                </div>
                <div class="little">
                  <p>上月同期(吨)</p>
                  <span class="yellow">{{
                    yongdianobj.carbonEmissionPreMonth
                      ? (+yongdianobj.carbonEmissionPreMonth).toFixed(1)
                      : ""
                  }}</span>
                </div>
              </div>
              <div class="tanone">
                <div class="little">
                  <p>本年累计(吨)</p>
                  <span class="green">{{
                    yongdianobj.carbonEmissionCurYear
                      ? (+yongdianobj.carbonEmissionCurYear).toFixed(1)
                      : ""
                  }}</span>
                </div>
                <div class="little">
                  <p>去年同期(吨)</p>
                  <span class="yellow">{{
                    yongdianobj.carbonEmissionPreYear
                      ? (+yongdianobj.carbonEmissionPreYear).toFixed(1)
                      : ""
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yuedu qushi">
          <!-- 月度负荷趋势 -->
          <div class="title">月度负荷趋势</div>
          <div ref="fuheqingk" class="echares219"></div>
        </div>
        <!-- 月度用能趋势 -->
        <div class="yuedu">
          <div class="title">月度用能趋势</div>
          <div ref="yongnengqushi" class="echares219"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="rightbox">
        <div class="jiance">
          <div class="title">实时负荷监测</div>
          <div class="echarts180" ref="jiance"></div>
        </div>
        <div class="jiance">
          <div class="title">主要用电设备（TOP5）</div>
          <div class="echarts180" ref="yongdianshebei"></div>
        </div>
        <div class="jiance">
          <div class="title">日发电量</div>
          <div class="echarts180" ref="rifadianl"></div>
        </div>
        <div class="jiance">
          <div class="title">月发电量</div>
          <div class="echarts180" ref="yuefadianl"></div>
        </div>
        <!-- <div class="baojin">
        <div class="jinshiri">报警信息</div>
        <div class="qiye" ref="qiye">
            <div class="littlebox" v-for="(item,index) in gaojinglist" :key="index">
              <div class="text"><span >{{ item.subburo }}</span>
                <span :class="{'leixing':item.eventLevel==3,'leiyellow':item.eventLevel==2,'leigreen':item.eventLevel==1}">
                  {{ item.eventLevel==1?'轻微告警':item.eventLevel==2?'普通告警':'严重告警' }}</span></div>
              <div class="text top"><span class="fff">{{ item.alarmInfo }}:
                <span :class="{'red':item.eventLevel==3,'yellow':item.eventLevel==2,'green':item.eventLevel==1}">报警值:
                  {{item.alarmValue }}</span></span></div>
              <div style="text-align: right;color: #fff;font-size: 12px;margin-top: 7px;">{{ item.time }}</div>
            </div>
          </div>
      </div> -->
      </div>
    </div>
    <screenfull
      style="position: absolute; left: 20px; bottom: 25px; z-index: 9999999"
      id="screenfull"
      @click="isScreenFull"
    >
      <el-button style="background-color: #02010d; border: none"
        >全屏</el-button
      ></screenfull
    >
  </div>
</template>

<script>
import * as echarts from "echarts";
import { autoHover } from "@/utils/tooltip"; // 引入封装的函数
import { getloginapi, geidangqianapi, getzidiannameapi } from "@/api/layout";
import {
  getdianwujiben,
  getgongsijibenapi,
  getzhongduanapi,
  getyongdianapi,
  getguangfuapi,
  getyongdianfuheapi,
  gettreexiaji,
  gettreelist,
  getloginuserapi,
  getyonghuxialaapi,
  getriyongdianliang,
  getyuefadianliang,
} from "@/api/large";
import { timeArray, hoursArraylist, thisMonthDates } from "@/utils/arr";
import screenfull from "screenfull";
export default {
  name: "LargeIndex",

  data() {
    return {
      timeobj: {},
      gaojinglist: [],
      userinfo: {},
      jibenqingkuang: {},
      zhongduanobjy: {},
      yongdianobj: {},
      yongdianfuheobj: {},
      topfivelist: [],
      topdatalist: [],
      benyuelist: [],
      shangyuelist: [],
      benyuerilist: [],
      jinrifuhelist: [],
      props: {
        label: "bizOrgName",
        // children: 'children'
      },
      form: { bizOrgName: "" },
      zidianname: "",
      defaultExpandedKey: "",
      fuhedata: [],
      guangfufadian: "",
      riyongdianlist: [],
      yuyongdianlist: [],
      flag: false,
    };
  },
  async mounted() {
    const re = await getloginuserapi();
    if (re.data.entity.orgType !== "04") {
      const res = await gettreelist();
      const ress = await gettreexiaji({ orgNo: res.data.list[0].bizOrgNo });
      this.form.bizOrgName = ress.data.list[0].bizOrgName;
      this.defaultExpandedKey = res.data.list[0].id.toString();

      await this.getarrjiekou(ress.data.list[0].bizOrgNo);
      // await this.getarrjiekou('88018932')
      this.$refs.tree.setCurrentKey(ress.data.list[0].id);
    } else {
      const res = await getyonghuxialaapi();
      this.form.bizOrgName = res.data.list[0].bizOrgName;
      // await this.getarrjiekou(res.data.list[0].bizOrgNo)
      await this.getarrjiekou(res.data.list[0].bizOrgNo);
    }
    this.gettime();
    this.getyuedufuhe();
    this.getyueduyongneng();
    this.getshishijiance();
    this.getzhuyaoshebei();
    this.getnewecharts();
    this.getriyongdian();
    this.getyuefadian();
  },

  methods: {
    isScreenFull() {
      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
    // 树组件懒加载
    async loadNode(node, resolve) {
      const re = await getloginuserapi();
      if (re.data.entity.orgType !== "04") {
        const res = await gettreelist();
        if (node.level === 0) {
          // 初始的级数（最顶层）
          return resolve(res.data.list); // 最顶层数据渲染为region
        }
        const ress = await gettreexiaji({ orgNo: node.data.bizOrgNo });
        if (node.level === 1) {
          return resolve(ress.data.list);
        } else if (node.level === 2) {
          return resolve([]);
        }
      } else {
        if (node.level === 0) {
          const res = await getyonghuxialaapi();
          return resolve(res.data.list);
        } else {
          return resolve([]);
        }
      }
    },
    async handleNodeClick(val) {
      this.form.bizOrgName = val.bizOrgName;
      this.$refs.shou.blur();
      await this.getarrjiekou(val.bizOrgNo);
      this.flag = true;
      this.getyuedufuhe();
      this.getyueduyongneng();
      this.getshishijiance();
      this.getzhuyaoshebei();
      this.getnewecharts();
      this.getriyongdian();
      this.getyuefadian();
    },
    // 大屏所有接口封装mounted调用
    async getarrjiekou(id) {
      const zidianobj = await getzidiannameapi({ dictType: "PDYW_DWBM" });
      const newarr = zidianobj.data.list.filter((ele) => ele.value == id);
      newarr.length
        ? (this.zidianname = newarr[0].text)
        : (this.zidianname = "智慧用能管理平台");
      // 获取单位基本情况
      try {
        const dianwu = await getgongsijibenapi({ subburo: id });
        // const dianwu = await getgongsijibenapi({ subburo: '88018932' })
        this.gaojinglist = JSON.parse(dianwu.data.entity.alarmLastDetailArray);
      } catch (error) {
        this.gaojinglist = [];
      }
      // 获取当前用户信息
      try {
        const userinfo = await geidangqianapi();
        this.userinfo = userinfo.data.entity;
      } catch (error) {
        this.userinfo = {};
      }
      // 获取单位进本信息
      try {
        const jibenqingkuang = await getdianwujiben({ subburo: id });
        this.jibenqingkuang = jibenqingkuang.data.entity;
      } catch (error) {
        this.jibenqingkuang = {};
      }
      // 获取单位终端情况
      try {
        const zhongduanobj = await getzhongduanapi({ subburo: id });
        this.zhongduanobjy = zhongduanobj.data.entity;
      } catch (error) {
        this.zhongduanobjy = {};
      }
      // 获取光伏发电量数据
      const guangfuobj = await getguangfuapi();
      this.guangfufadian = Math.trunc(
        parseFloat(
          guangfuobj.data.list[0].itemDataViews[0].displayValue.replace(
            /,/g,
            ""
          )
        )
      );
      // 获取日用电量
      const now = new Date();
      const year = now.getFullYear(); // 得到年份
      const month = now.getMonth() + 1; // 得到月份
      const date = now.getDate(); // 得到日期
      const {
        data: {
          entity: { ecValueOHArray },
        },
      } = await getriyongdianliang({
        date: year + "-" + month + "-" + date,
        deviceId: "10012450",
      });
      this.riyongdianlist = ecValueOHArray;
      const {
        data: {
          entity: { ecValueODArray },
        },
      } = await getyuefadianliang({
        date: year + "-" + month,
        deviceId: "10012450",
      });
      this.yuyongdianlist = ecValueODArray;
      // 获取用电单位用电量情况
      try {
        const yongdianobj = await getyongdianapi({ subburo: id });

        this.yongdianobj = yongdianobj.data.entity;
        this.topfivelist = [];
        this.topdatalist = [];
        JSON.parse(yongdianobj.data.entity.epowerDevTopArray).forEach(
          (ele, index) => {
            if (index < 5) {
              this.topfivelist.unshift(ele.devName);
              this.topdatalist.unshift(ele.totalEpower);
            }
          }
        );
        this.benyuelist = JSON.parse(yongdianobj.data.entity.epowerCurDayArray);
        this.shangyuelist = JSON.parse(
          yongdianobj.data.entity.epowerPreDayArray
        );
      } catch (error) {
        this.yongdianobj = {};
        this.topfivelist = [];
        this.topdatalist = [];
        this.benyuelist = [];
        this.shangyuelist = [];
      }
      // 查询用电单位负荷情况
      try {
        const yongdianfuheobj = await getyongdianfuheapi({ subburo: id });
        this.benyuerilist = JSON.parse(
          yongdianfuheobj.data.entity.loadCurMonthPointsArray
        );
        this.jinrifuhelist = JSON.parse(
          yongdianfuheobj.data.entity.loadCurDayPointsArray
        );
        this.fuhedata = [];
        for (let i = 0; i < this.benyuerilist.length; i++) {
          this.fuhedata.push(i + 1 + "号");
        }
        this.yongdianfuheobj = yongdianfuheobj.data.entity;
      } catch (error) {
        this.benyuerilist = [];
        this.jinrifuhelist = [];
        this.yongdianfuheobj = {};
      }
    },
    // 获取当前时间戳
    gettime() {
      const now = new Date();
      const year = now.getFullYear(); // 得到年份
      const month = now.getMonth() + 1; // 得到月份
      const date = now.getDate(); // 得到日期
      const day = now.getDay(); // 得到周几
      let week;
      const arr_week = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      week = arr_week[day];
      this.timeobj = { year, month, date, week };
    },
    // 月度负荷趋势
    getyuedufuhe() {
      const chartDom = this.$refs.fuheqingk;
      const myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          data: ["KW"],
        },
        grid: {
          left: "1%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.fuhedata,
        },
        yAxis: {
          axisLine: { show: true },
          splitLine: {
            // 网格线
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
              color: "#333",
            },
            show: true, // 隐藏或显示
          },
          type: "value",
          axisLine: { show: true },
          name: "(KW)",
          type: "value",
        },
        series: [
          {
            name: "本月负荷",
            type: "line",
            // symbol: 'none',
            symbolSize: "0",
            data: this.benyuerilist,
            itemStyle: {
              color: "#11966a",
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 图表响应处理
        myChart.resize();
      });
      autoHover(myChart, option, 31, 3000, this.flag);
    },
    // 月度用能趋势
    getyueduyongneng() {
      const chartDom = this.$refs.yongnengqushi;
      const myChart = echarts.init(chartDom);
      const newarr = [];
      for (let i = 0; i < this.benyuelist.length; i++) {
        newarr.push(i + 1 + "号");
      }
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // legend: {left:'right'},
        xAxis: [
          {
            type: "category",
            data: newarr,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            splitLine: {
              // 网格线
              lineStyle: {
                type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                color: "#333",
              },
              show: true, // 隐藏或显示
            },
          },
        ],

        series: [
          {
            name: "本月用电量",
            color: "#fff",
            type: "bar",
            barWidth: "60%",
            // data: [50,60,90,18,350,42,260,97,260,314,185],
            data: this.benyuelist,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#1394f0", // 指0%处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0d1f37", // 指100%处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            name: "上月用电量",
            type: "line",
            // symbol: 'none',
            symbolSize: "0",
            smooth: true,
            // data:[50,80,90,60,23,70,58],
            data: this.shangyuelist,
            itemStyle: {
              color: "#bea811",
              // color:'#fff'
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 图表响应处理
        myChart.resize();
      });
      autoHover(myChart, option, 31, 3000, this.flag);
    },
    // 试试负荷监控
    getshishijiance() {
      const chartDom = this.$refs.jiance;
      const myChart = echarts.init(chartDom);

      let option;
      option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          data: ["kW"],
        },
        grid: {
          left: "1%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timeArray,
        },
        yAxis: {
          axisLine: { show: true },
          splitLine: {
            // 网格线
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
              color: "#333",
            },
            show: true, // 隐藏或显示
          },
          type: "value",
          axisLine: { show: true },
          name: "(kW)",
          type: "value",
        },
        series: [
          {
            name: "实时负荷",
            type: "line",
            // symbol: 'none',
            symbolSize: "0",
            smooth: true,
            data: this.jinrifuhelist,
            lineStyle: {
              color: "#1697da",
            },
            areaStyle: {
              normal: {
                // 前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(12,180,250, 1)" },
                  { offset: 1, color: "rgba(63, 208, 249, 0)" },
                ]),
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 图表响应处理
        myChart.resize();
      });
      const num = this.jinrifuhelist.filter((ele) => ele).length;
      autoHover(myChart, option, num, 3000, this.flag);
    },
    // 主要用电设备
    getzhuyaoshebei() {
      const chartDom = this.$refs.yongdianshebei;
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {},
        grid: {
          left: "1%",
          right: "4%",
          bottom: "3%",
          top: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          splitLine: {
            // 网格线
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
              color: "#333",
            },
            show: true, // 隐藏或显示
          },
          axisLabel: {
            color: "#fff", // 设置Y轴字体颜色为蓝色
          },
        },
        yAxis: {
          type: "category",
          axisTick: { show: false }, // 不显示y轴刻度
          // data: [, '企业4', '企业3', '企业2', '企业1'],
          data: this.topfivelist,
          axisLabel: {
            color: "#fff", // 设置Y轴字体颜色为蓝色
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            // data: [150, 200, 240, 230, 180],
            data: this.topdatalist,
            itemStyle: {
              normal: {
                color: function (params) {
                  // 给出颜色组
                  // var colorList = ['#2972c1','#24a4af','#15ddb9','#8ad95e','#d9c562'];
                  // return colorList[params.dataIndex]
                  const colorList = [
                    ["#2972c1", "#242834"],
                    ["#24a4af", "#242834"],
                    ["#15ddb9", "#242834"],
                    ["#8ad95e", "#242834"],
                    ["#d9c562", "#242834"],
                  ];
                  const index = params.dataIndex;
                  // 柱子个数超过colorList设置的个数，循环使用
                  // if (index >= colorList.length) {
                  //   index =index - colorList.length
                  // }
                  // 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 1,
                      color: colorList[index][0],
                    },
                    {
                      offset: 0,
                      color: colorList[index][1],
                    },
                  ]);
                },
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 图表响应处理
        myChart.resize();
      });
    },
    // 测试新款echarts
    getnewecharts() {
      const chartDom = this.$refs.progress;
      const myChart = echarts.init(chartDom);
      var option;

      const value = this.zhongduanobjy.allOnlineRate; // 当前进度
      const maxvalue = 100; // 进度条最大值
      // 指定图标的配置项和数据
      var option = {
        title: {
          text: "在线率",
          left: "center",
          // bottom:'0'
          top: "53%",
          textStyle: {
            color: "black",
            fontSize: 16,
            fontWeight: 100,
          },
        },
        // 饼图中间显示文字
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: value + "%", // 文字内容
            fill: "#62daad", // 文字颜色
            fontSize: 22, // 文字字号
            // fontWeight: '600'
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            // 第一张圆环
            name: "在线率",
            type: "pie",
            radius: ["75%", "80%"],
            center: ["50%", "50%"],
            // 隐藏指示线
            labelLine: { show: false },
            // 隐藏圆环上文字
            label: {
              show: false,
            },
            data: [
              // value当前进度 + 颜色
              {
                name: "在线",
                value: value,
                itemStyle: {
                  normal: { color: "#62daad" },
                },
              },
              {
                name: "离线",
                value: value ? maxvalue - value : 0,
                itemStyle: {
                  normal: { color: "#ededed" },
                },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 图表响应处理
        myChart.resize();
      });
    },
    // 日发电量图表
    getriyongdian() {
      const chartDom = this.$refs.rifadianl;
      const myChart = echarts.init(chartDom);

      let option;
      option = {
        xAxis: {
          type: "category",
          data: hoursArraylist,
        },
        grid: {
          top: "7%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            // 网格线
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
              color: "#333",
            },
            show: true, // 隐藏或显示
          },
        },
        series: [
          {
            data: this.riyongdianlist,
            type: "line",
            symbolSize: "7",
            areaStyle: {
              normal: {
                // 前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#0b1839" },
                  { offset: 1, color: "rgba(63, 208, 249, 0)" },
                ]),
              },
            },
            //     itemStyle:{
            //       color:'#fff'
            //     },
            lineStyle: {
              color: "#5087ec", // 设置折线颜色为蓝色
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 图表响应处理
        myChart.resize();
      });
    },
    // 月发电量图表
    getyuefadian() {
      const chartDom = this.$refs.yuefadianl;
      const myChart = echarts.init(chartDom);

      let option;
      option = {
        grid: {
          top: "7%",
          left: "1%",
          right: "2%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: thisMonthDates,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            // 网格线
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
              color: "#333",
            },
            show: true, // 隐藏或显示
          },
        },
        series: [
          {
            data: this.yuyongdianlist,
            type: "bar",
            itemStyle: {
              color: "#5087ec", // 设置柱子的颜色为绿色
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 图表响应处理
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 在src/assets/css/global.css中将下载号的字体引入
@font-face {
  font-family: NumFont;
  /* src: url('../fonts/flatNum.ttf'); */
  src: url("../../assets//font/font/UnidreamLED.woff");
  unicode-range: U+30-39;
}
::v-deep .el-select-dropdown {
  background-color: rgba(1, 28, 82, 0.8);
}
::v-deep .el-icon-arrow-up {
  display: none;
}
::v-deep .el-input__inner {
  width: 300px;
  background: url(../../assets/mulu.png) no-repeat center center; //引入icon
  background-size: 17px 19px; //这个是图片的大小，在这里不能直接设置width  height,设置宽高其实是select的宽高，图片可能会失真只设置宽度  高度auto也行
  background-position: right; //在input中定位置  可以调整自定义icon的左右上下位置
  padding: 0 0 0 26px; //需要设置padding 把placeholder向右移
  box-sizing: border-box;
  font-size: 14px;
  border: none;
  color: #fff;
  font-size: 16px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.option {
  height: auto;

  // opacity: 0.1;
}
.bigbox {
  // width: 100%;
  // height: 100%;
  position: relative;
  width: 1920px;
  height: 1080px;
  background-image: url("/src/assets/tucen.png");
  background-size: cover; /* 背景图覆盖整个页面 */
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 背景图不重复 */
  .titlebox {
    height: 94px;
    background-image: url("/src/assets/titleimg.png");
    background-size: cover; /* 背景图覆盖整个页面 */
    background-position: center; /* 背景图居中显示 */
    background-repeat: no-repeat; /* 背景图不重复 */
    display: flex;
    // justify-content: space-between;
    .div {
      width: 33.3%;
    }
    color: #fff;
    padding: 10px 30px;
    .zhong {
      font-size: 30px;
      padding-top: 17px;
    }
  }
  .bodybox {
    padding: 20px;
    display: flex;
    .leftbox {
      width: 329px;
      height: 940px;
      background: rgba(28, 58, 109, 0.3);
      padding: 40px 10px 30px 40px;

      .little {
        height: 95px;
        margin-bottom: 54px;
        display: flex;
        .text {
          margin-left: 30px;
          .number {
            color: #26bf59;
            font-size: 48px;
            font-family: NumFont !important;
          }
          .green {
            color: #00c9c9;
            font-size: 48px;
            font-family: NumFont !important;
          }
          .yellow {
            color: #f99d31;
            font-size: 48px;
            font-family: NumFont !important;
          }
          .day {
            color: #e4e4e4;
            font-size: 18px;
          }
        }
      }
      .footer {
        height: 120px;
        display: flex;
        .zianxian {
          color: #ffffff;
          font-size: 18px;
          padding-top: 30px;
          .span {
            display: inline-block;
            width: 4px;
            height: 14px;
            background: linear-gradient(0deg, #12b380, #82d9bd);
            border-radius: 2px;
            margin-right: 10px;
          }
          p {
            padding-left: 15px;
            font-size: 12px;
            margin-top: 10px;
            span {
              color: #12b380;
              font-size: 18px;
            }
          }
        }
        .bingtu {
          margin-left: 40px;
          width: 50%;
          text-align: center;
          // padding-top: 40px;
          position: relative;
          .text {
            color: #fff;
            position: absolute;
            left: 30%;
            top: 30%;
          }
        }
      }
    }
    .moblebox {
      width: 1103px;
      padding: 0 20px;

      .header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .littlebox {
          width: 341px;
          height: 382px;
          background: rgba(28, 58, 109, 0.3);
          .title {
            width: 341px;
            height: 40px;
            background: linear-gradient(to right, #0b528a, #070e27) center
              center no-repeat;
            padding-left: 10px;
            color: #fff;
            line-height: 40px;
          }
          .text {
            padding: 15px;
            .img {
              width: 312px;
              height: 97px;
              padding: 25px 20px;
              background-image: url("../../assets/large/tanpai.png");
              margin-bottom: 10px;
              display: flex;
              justify-content: space-between;
              color: #fff;
              font-size: 14px;
              .little {
                text-align: center;
                width: 150px;
                .span {
                  color: #6ce1f5;
                  font-size: 24px;
                }
                .spans {
                  color: #e59b45;
                  font-size: 24px;
                }
              }
            }
          }
          .model {
            padding: 18px;
            .img {
              width: 301px;
              height: 30px;
              margin-bottom: 10px;
              background-image: url("../../assets/large/fuheone.png");
              display: flex;
              justify-content: space-between;
              color: #fff;
              line-height: 30px;
              div {
                width: 100px;
                text-align: center;
              }
            }
            .imgtwo {
              width: 301px;
              height: 82px;
              margin-bottom: 10px;
              background-image: url("../../assets/large/fuhetwo.png");
              padding: 10px 0;
              .topp {
                display: flex;
                justify-content: space-between;
                text-align: center;
                color: #fff;
                font-size: 14px;
                .c {
                  width: 100px;
                  line-height: 30px;
                  .span {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background: #6ce1f5;
                    border-radius: 50%;
                    margin-right: 5px;
                  }
                }
                .b {
                  width: 100px;
                  line-height: 30px;
                  .spanss {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background-color: #e59b45;
                    border-radius: 50%;
                    margin-right: 5px;
                  }
                }
                .yellow {
                  color: #e59b45;
                  font-size: 24px;
                }
                .green {
                  color: #6ce1f5;
                  font-size: 24px;
                }
              }
            }
          }
          .tanpai {
            padding: 15px;
            .tanone {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              .little {
                width: 152px;
                height: 96px;
                background-image: url("../../assets/large/tanpai.png");

                padding-top: 25px;
                text-align: center;
                // line-height: 96px;
                color: #fff;
                font-size: 14px;
                .green {
                  font-size: 24px;
                  color: #6ce1f5;
                }
                .yellow {
                  font-size: 24px;
                  color: #e59b45;
                }
              }
            }
          }
        }
      }
      .yuedu {
        width: 1063px;
        height: 259px;
        background: rgba(28, 58, 109, 0.3);
        .title {
          width: 1063px;
          height: 40px;
          background: linear-gradient(to right, #0b528a, #070e27) center center
            no-repeat;
          padding-left: 10px;
          color: #fff;
          line-height: 40px;
        }
      }
      .qushi {
        margin-bottom: 20px;
      }
    }
    .rightbox {
      .jiance {
        width: 445px;
        height: 220px;
        background: rgba(28, 58, 109, 0.3);
        margin-bottom: 20px;
        .title {
          width: 445px;
          height: 40px;
          background: linear-gradient(to right, #0b528a, #070e27) center center
            no-repeat;
          padding-left: 10px;
          color: #fff;
          line-height: 40px;
        }
      }
      .baojin {
        width: 445px;
        height: 460px;
        background: rgba(28, 58, 109, 0.3);
        .jinshiri {
          width: 445px;
          height: 40px;
          background: linear-gradient(to right, #0b528a, #070e27) center center
            no-repeat;
          padding-left: 10px;
          color: #fff;
          line-height: 40px;
        }
        .qiye {
          background: rgba(28, 58, 109, 0.2);
          // opacity: 0.7;
          // height: 100%;
          padding: 20px 10px 10px 10px;
          // overflow-x: hidden;
          // overflow-y: scroll;
          box-sizing: border-box;
          height: 420px;
          overflow-x: hidden;
          overflow-y: scroll;
          .littlebox {
            // height: 90px;
            // background: #99D5FF;
            background: rgba(28, 58, 109, 0.3);
            padding: 10px;
            margin-bottom: 20px;
            .top {
              margin-top: 10px;
            }
            .text {
              font-size: 14px;
              color: #fff;
              display: flex;
              justify-content: space-between;
              // text-align: justify;
              box-sizing: border-box;
              .red {
                color: red;
                font-size: 12px;
              }
              .fff {
                font-size: 12px;
                // text-align: right;
              }
              .leixing {
                text-align: right;
                border-radius: 30px;
                border: 1px solid red;
                color: red;
                padding: 1px 5px;
              }
              .green {
                color: #2bcdd9;
              }
              .leigreen {
                border-radius: 30px;
                border: 1px solid #2bcdd9;
                color: #2bcdd9;
                padding: 1px 5px;
              }
              .leiyellow {
                border-radius: 30px;
                border: 1px solid #ff8432;
                color: #ff8432;
                padding: 1px 5px;
              }
              .yellow {
                color: #ff8432;
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .caijishebei .el-progress__text {
  display: none;
}
::v-deep .el-progress__text {
  display: none;
}
.qiye::-webkit-scrollbar {
  display: none;
}
.echares219 {
  height: 219px;
}
.echarts180 {
  height: 180px;
}
::v-deep .el-progress-circle {
  width: 118px !important;
  height: 118px !important;
}
</style>
